<template>
	<view class='minepage'>
		<view class='line'></view>
		<view class='content'>
			<view class='mysign'>
				<button open-type="getUserInfo" @getuserinfo="getuserinfo" hover-class="none">
					<image class='icon' :src='avatarUrl'></image>
				</button>
				<view class='mysign_right'>
					<view class='name font-b' style='font-size:34upx;color:#333333;line-height:34upx;'>{{nickName || '点击登录'}}</view>
					<!-- <view class='number'>待统一认证接口开发接入</view> -->
				</view>
				<!-- <image class='close_menu' src='/static/img/close.png' @click='signout'></image> -->
				<!-- <wxc-dialog class="wxc-dialog" title="" content="确认退出登录状态？" confirm-text="确定" cancel-text="取消" bindconfirm="onConfirm"
				 bindcancel="onCancel"></wxc-dialog> -->
			</view>
			<view class='line'></view>
			
			<view class='mylist'>
				<block v-for="(item,index) in order_menus" :key="index">
					<view @click='onMyOrderClick(item.order_id)' class='order_list' data-item="item">
						<view>
							<text style="margin-right: 15upx;" class="iconfont" :class="item.order_icon"></text>
							<text>{{item.order_name}}</text>
						</view>  
						<view>
							<text class="iconfont icon-right" ></text>
						</view>
					</view>
				</block>
				
				<!-- <view @click='onMyOrderClick' class='order_list'>
					<image class='icon1' src='/static/img/l_icon.png'></image>
					<view>我的订单</view>
					<image class='icon2' src='/static/img/r_icon.png'></image>
				</view>
				<view class='line1'></view>
				<view @click='onMyCollection' class='order_list order_list1'>
					<image class='icon1' src='/static/img/like_icon.png'></image>
					<view>我的关注</view>
					<image class='icon2' src='/static/img/r_icon.png'></image>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasUserInfo: false,
				avatarUrl: "",
				nickName: "",
				order_menus:[
					{
						order_id:'1',
						order_name:'酒店订单',
						order_icon:'icon-jiudian'
					},
					{
						order_id:'0',
						order_name:'门票订单',
						order_icon:'icon-bank-fill'
					},
					{
						order_id:'2',
						order_name:'线路订单',
						order_icon:'icon-zhishipai'
					},
					{
						order_id:'3',
						order_name:'购物订单',
						order_icon:'icon-xiazai50'
					},
				],
				rawData: {}
			}
		},
		onLoad: function(options) {
			this.avatarUrl = this.pub.getHeadImage() || '/static/img/default_icon.png';
			this.nickName = this.pub.getUser() || "点击登录";

			let that = this;

			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					console.log(loginRes);
					that.$postApi(that.$path.GET_OPENID_WX, {
						code: loginRes.code, //要去换取openid的登录凭证
						channelType: '1'
					}).then(data => {
						console.log("登录信息-------------------->",data)
						that.pub.setOpenid(data.data.openid)
						that.pub.setAccount(data.data.openid)
						// 获取用户信息
						    uni.getUserInfo({
						      provider: 'weixin',
						      success: function (infoRes) {
								console.log(infoRes)
						        console.log('用户昵称为：' + infoRes.userInfo.nickName);
								console.log('用户头像为：' + infoRes.userInfo.avatarUrl);
								that.avatarUrl = infoRes.userInfo.avatarUrl
								that.nickName = infoRes.userInfo.nickName
								var params = {
									openid:that.pub.getOpenid(),
									nickname:that.nickName,
									headPortrait:that.avatarUrl,
									channelType:1
								}
								that.$postApi(that.$path.SET_NEW_VIP, params).then(res => {
									console.log("会员登录返回结果-------------------------->",res.data);
									let memberId = res.data.data.id
									that.pub.setMemberId(memberId)
									
								})
						      }
						    });
					})
					
				}
			});
		},
		onShow:function(){
			//#ifdef H5
			document.title = '我的'
			//#endif
		},
		methods: {
			onMyCollection: function(e) {
				// #ifdef H5
				let token = this.pub.getUserInfo();
				let appid = this.pub.getAppid();
				let openid = this.pub.getOpenid();
				let page = 2;
				let url = this.$path.RETAILER_INDEX_PAGE
				let param = null;
				this.pub.jumpToWeb(
					`${url}?page=${page}&userinfo=${token}&param=${encodeURIComponent(JSON.stringify(param))}&appid=${appid}&openid=${openid}`);
				// #endif
			},

			onMyOrderClick: function(order_id) {
				uni.navigateTo({
					url: '/pages/order/neworderlist?item=' + order_id,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			getuserinfo(e) {
				console.log(e)
				let openid = this.pub.getOpenid();
				if(e.detail.userInfo.nickName &&  e.detail.userInfo.avatarUrl){
					this.nickName = e.detail.userInfo.nickName;
					this.avatarUrl = e.detail.userInfo.avatarUrl;
					var params = {
						openid:openid,
						nickname:this.nickName,
						headPortrait:this.avatarUrl,
						channelType:1
					}
					this.$postApi(this.$path.SET_NEW_VIP, params).then(res => {
						console.log(res.data.data)
						var memberId = res.data.data.id
						uni.setStorage({
						    key: 'memberId',
						    data: memberId,
						    success: function () {
						        console.log('success');
						    }
						});
					})
					
				}
				
			},
		}
	}
</script>

<style lang="scss">
	.parent {
		width: 100%;
	}
	.iconfont{
		font-size: 36upx;
	}
	/* pages/mine/minepage.wxss */
	.mysign {
		padding: 60upx 50upx;
		display: flex;
		position: relative;
	}

	button::after {
		border: none;
	}

	.mysign button {
		background-color: #fff;
		border-radius: 0;
		padding-left: 0upx;
		padding-right: 0upx;
		line-height: 1;
	}

	.mysign .icon {
		width: 150upx;
		height: 150upx;
		margin-right: 47upx;
		border-radius: 50%;
	}

	.mysign .mysign_right {
		flex: 1;
		color: #333;
		font-size: 34upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-content: center;
	}

	.mysign .mysign_right .number {
		color: #888;
		font-size: 26upx;
		line-height: 26upx;
		margin-top: 40upx;
	}

	.mysign .close_menu {
		width: 44upx;
		height: 48upx;
		position: absolute;
		top: 50%;
		right: 55upx;
		margin-top: -24upx;
	}
	.mylist{
		padding: 20upx;
	}
	.mylist .order_list {
		display: flex;
		position: relative;
		// padding: 65upx 59upx 65upx 78upx;
		padding:30upx 50upx;
		justify-content: space-between;
		font-size: 15px;
		// width: 90%;
		border-bottom: 1px solid #eee;
		color: #333;
		align-items: center;
		text:first-of-type{
			color: #666666;
		}
		text:last-of-type{
			font-weight: 300;
		}
	}

	.mylist .order_list .icon1 {
		width: 21upx;
		height: 30upx;
		margin-right: 27upx;
	}

	.mylist .order_list .icon2 {
		width: 18upx;
		height: 30upx;
		position: absolute;
		right: 59upx;
	}

	.mylist .line1 {
		height: 19upx;
		background: rgba(246, 246, 246, 1);
	}

	.mylist .order_list1 {
		padding: 50upx 59upx 55upx 78upx;
		border-bottom: 2upx solid #F5F5F5;
	}

	.mylist .order_list1 .icon1 {
		width: 30upx;
		height: 28upx;
		margin-right: 27upx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background: #E7EBEE;
	}
</style>
